<template>
  <div>
    <div class="main-bg" :style="sceneid==='sstbg'?'height:640px;':''"></div>
    <el-row :style="sceneid==='sstbg'?'padding-top:0;':''">
      <el-col :span="24">
        <el-main :style="sceneid==='sstbg'?'padding:0;':''">
          <el-calendar :range="dayRange">
            <template slot="dateCell" slot-scope="{date, data}">
              <div
                @click="pickDay(date, data)"
                :class="isAvailable(data.day) ? 'available' : 'notavailable'" >
                <span>{{ data.day.split('-').slice(2).join('-') }}</span>
              </div>
            </template>
          </el-calendar>
        </el-main>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { commonPost } from "@api/data";
import moment from "moment";
export default {
  name: "Mzrq",
  components: {},
  data() {
    return {
      sceneid : this.$store.state.terminfo.seceninfo.sceneid,
      showDay: [], // 展示在时间段列表上方的日期和星期
      dayRange: [], // 可选日期段
      timeRanges: [], // 选择日期后当天的时间段
      currentPage: 0,
      pageSize: 5,
      showUpArrow: false,
      showDownArrow: false,
      pageList: [] // 显示在分页中的内容
    };
  },
  props: {
    selectedDoc: Object
  },
  mounted() {
    this.query();
  },
  computed: {},
  methods: {
    isAvailable: function(day) {
      const availableDays = this.showDay.map(item => {
        return item.regDate;
      });
      return availableDays.includes(day);
    },
    query() {
      let data = {};
      data.url = "/api/GetRegDayRange";
      data.payload = {};
      commonPost(data)
        .then(res => {
        this.showDay=res.data;
        })
      this.getDays();
    },
    // 计算可选日期
    getDays() {
      // const weekOfday = parseInt(moment().format("d")); // 计算今天是这周第几天，周一为一周中的第一天
      // const start = moment().subtract(weekOfday - 1, "days").format("YYYY-MM-DD"); // 周一日期
      // const end = moment().add(14 - weekOfday, "days").format("YYYY-MM-DD"); // 周日日期
      // this.dayRange = [start, end];
    },
    compareDate (d1, d2) {
    let reg = new RegExp('-', 'g')
    return ((new Date(d1.replace(reg, '/'))) > (new Date(d2.replace(reg, '/'))))
  },
    pickDay(date, data) {
      var regDate = data.day;
      var today = moment().format("YYYY-MM-DD");
      var endregDate = this.showDay[this.showDay.length-1].regDate;
      if(this.compareDate(today,regDate) || this.compareDate(regDate,endregDate) ){
        return;
      }
      if (regDate == today) {
        data.type = "1";
      } else {
        data.type = "2";
      }
      this.$store.dispatch("appointment/updateDate", data);
      this.$emit("selectDate", data);
    }
  }
};
</script>
<style scoped>
.main-bg {
  position: absolute;
  width: 100%;
  left: 0;
  top: 46px;
  bottom: 0;
  background: #fff;
}
.el-row {
  position: absolute;
  left: 0;
  top: 46px;
  bottom: 0;
  width: 100%;
  display: flex;
  padding-top: 40px;
  box-sizing: border-box;
  justify-content: center;
}
.el-main {
  text-align: center;
}
.doctor-name {
  color: #2888ef;
  font-weight: bold;
  font-size: 18px;
  margin: 20px 0 6px 0;
}
.doctor-name b {
  color: #333;
}
.seleced-show-day {
  width: 100%;
  height: 72px;
  line-height: 72px;
  font-size: 24px;
  font-weight: bold;
  color: #2888ef;
  text-align: center;
}
.amount-number {
  text-align: center;
  height: 48px;
  width: 48px;
  border-radius: 30px;
  background: #2888ef;
  color: #fff;
  font-weight: bold;
  padding-top: 8px;
}
.amount-number p {
  line-height: 18px;
}
.amount-number.over {
  background: #999;
  padding-top: 14px;
}
.slide-arrow {
  position: fixed;
  right: 60px;
  font-size: 32px;
  font-weight: bold;
  color: #2888ef;
}
.slide-up {
  top: 160px;
}
.slide-down {
  bottom: 120px;
}
</style>
<style>
/* 覆盖原有element-ui日历样式 */
.el-calendar-table .el-calendar-day {
  position: relative;
  height: 60px;
}
.el-calendar-table .el-calendar-day .spqn::before {
  font-size: 20px;
}
.el-calendar-table .el-calendar-day .available{
  font-size: 24px;
  color:#fff;
  height: 100%;
  background: #3d3;
}
.el-calendar-table .el-calendar-day .available::before {
    content: "有号";
    position: absolute;
    z-index: 0;
    top: 24px;
    left: 13px;
    font-size: 18px;
    color: #2888ef;
    font-weight: bold;
}
.notavailable::before {
  content: "无号";
  position: absolute;
  z-index: 0;
  top: 26px;
  left: 12px;
  color: rgb(213, 221, 219);
}
.el-calendar-table .el-calendar-day .selected {
  z-index: 1;
}
</style>